home
***
CD-ROM
|
disk
|
FTP
|
other
***
search
/
Personal Computer World 2009 February
/
PCWFEB09.iso
/
Software
/
Shareware
/
Signal for Windows 1.1.3
/
Signal_Setup.exe
/
web
/
iphone
/
iphone.css
< prev
next >
Wrap
Cascading Style Sheet File
|
2008-09-11
|
15KB
|
903 lines
/*
Copyright (c) 2007-2008 Alloysoft, LLC. All rights reserved.
http://www.alloysoft.com
*/
body {
background: #000;
font: 16px Helvetica, Arial, sans-serif;
margin: 0px;
}
#container {
width: 100%;
height: 416px; /* 355 */
text-align: center;
position: relative;
}
body[orientation="landscape"] #container {
height: 269px;
}
#header {
background: url("images/back_top.gif") left top repeat-x #000;
border-bottom: 1px solid #212121;
color: #fff;
width: 100%;
font-size: 12px;
font-weight: bold;
height: 46px;
text-align: center;
position: absolute;
left: 0px;
top: 0px;
z-index: 3;
overflow: hidden;
}
#preload {
display: none;
}
#trackInfo {
width: 240px;
margin: auto;
}
body[orientation="landscape"] #trackInfo {
width: 400px;
}
#footer {
background: url("images/back_top.gif") left top repeat-x #000;
color: #fff;
width: 100%;
height: 51px; /* 46 */
position: absolute;
left: 0px;
bottom: 0px;
z-index: 3;
}
.trackInfo {
color: #AAA;
height: 15px;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
/* Keep text on a single line and break with ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#title {
color: #fff;
}
#btnMedialib {
background: url("images/btn_lib.png") center no-repeat;
position: absolute;
top: 6px;
left: 5px;
width: 29px;
height: 30px;
cursor: pointer;
}
#btnPlaylist {
background: url("images/btn_top.png") center no-repeat;
position: absolute;
top: 6px;
right: 5px;
width: 29px;
height: 30px;
cursor: pointer;
}
#playbackcontrols {
position: absolute;
width: 100%;
height: 51px;
left: 0px;
bottom: 0px;
z-index: 4;
text-align: center;
}
#ctrl_prev {
background: url("images/ctrl_prev.png") center no-repeat;
cursor: pointer;
width: 23px;
height: 51px;
padding-left: 20px;
padding-right: 20px;
position: absolute;
top: 0px;
left: 35px;
}
#ctrl_play {
cursor: pointer;
width: 23px;
height: 39px;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
top: 0px;
margin: auto;
}
#ctrl_next {
background: url("images/ctrl_next.png") center no-repeat;
cursor: pointer;
width: 23px;
height: 51px;
padding-left: 20px;
padding-right: 20px;
position: absolute;
top: 0px;
right: 35px;
}
#albumart {
position: absolute;
width: 100%;
left: 0px;
top: 46px;
z-index: 2;
}
#artwork {
width: 320px;
height: 320px;
}
body[orientation="landscape"] #artwork {
width: 172px;
height: 172px;
}
#medialib {
visibility: hidden;
background: #fff;
width: 100%;
position: absolute;
height: 416px;
left: 0px;
top: 0px;
z-index: 4;
overflow: hidden;
}
body[orientation="landscape"] #medialib {
height: 269px;
}
#playlist {
visibility: hidden;
background: #fff;
width: 100%;
position: absolute;
height: 416px;
left: 0px;
top: 0px;
z-index: 4;
overflow: hidden;
}
body[orientation="landscape"] #playlist {
height: 269px;
}
#speakers {
visibility: hidden;
background: url("images/stripes.png") #c5ccd3;
width: 100%;
position: absolute;
height: 416px;
left: 0px;
top: 0px;
z-index: 4;
overflow: hidden;
}
body[orientation="landscape"] #speakers {
height: 269px;
}
#speakersettings
{
background: url("images/stripes.png") #c5ccd3;
}
.settings h2 {
font-size: 16px;
text-align: left;
padding-left: 8px;
font-weight: bold;
color: #4c566c;
text-shadow: rgba(255, 255, 255, 0.75) 1px 1px 0;
}
.settings .infomsg {
margin-bottom: 20px;
font-size: 16px;
color: #4c566c;
text-shadow: rgba(255, 255, 255, 0.75) 1px 1px 0;
}
.settings {
margin-left: 10px;
margin-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.settings ul {
margin-bottom: 9px;
border: 1px solid #acaeb0;
-webkit-border-radius: 10px;
}
.settings ul li {
font-size: 17px;
border-top: 1px solid #acaeb0;
border-bottom: none;
min-height: 45px;
padding: 0;
padding-left: 8px;
line-height: 45px;
}
.settings ul li:first-child {
border-top: none;
}
.flipbtn {
background: #fff url("images/flipbtn_back_off.png") repeat-x;
border: 1px solid #888;
position: absolute;
top: 8px;
right: 8px;
width: 94px;
height: 25px;
font-size: 17px;
font-weight: bold;
line-height: 27px;
-webkit-border-radius: 4px;
}
.flipbtn[enabled="true"] {
background: url("images/flipbtn_back_on.png") repeat-x #3c80e8;
border-top: 1px solid #093889;
border-left: 1px solid #1453b2;
border-bottom: 1px solid #5289d7;
}
.flipbtnslider {
position: absolute;
top: -1px;
left: -1px;
width: 40px;
height: 25px;
border: 1px solid #888888;
-webkit-border-radius: 4px;
background: url("images/flipslider.png") repeat-x #fff;
}
.flipbtnback_on {
position: absolute;
top: 0;
left: 0;
width: 54px;
color: #fff;
display: none;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
}
.flipbtnback_off {
position: absolute;
top: 0;
right: 0;
width: 54px;
color: #808080;
text-align: center;
}
.flipbtn[enabled="true"] > .flipbtnback_on {
display: block;
}
.flipbtn[enabled="true"] > .flipbtnback_off {
display: none;
}
.flipbtn[enabled="true"] > .flipbtnslider {
left: auto;
right: -1px;
}
ul {
background: #fff;
list-style: none;
padding: 0px;
margin: 0px;
text-align: left;
}
ul li {
border-bottom: 1px solid #e9e9e9;
font-size: 18px; /* 20px */
font-weight: bold;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
cursor: pointer;
/* Keep text on a single line and break with ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul li.playing {
background: url("images/playingitem.png") 296px center no-repeat;
padding-right: 28px;
}
body[orientation="landscape"] ul li.playing {
background: url("images/playingitem.png") 456px center no-repeat;
}
ul li.group {
padding-right: 45px;
}
.listArtist {
font-size: 13px;
color: gray;
}
#grouptitle {
width: 260px;
/* Keep text on a single line and break with ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body[orientation="landscape"] #grouptitle {
width: 420px;
}
#navprev {
width: 33%;
float: left;
}
#navnext {
width: 33%;
float: right;
text-align: right;
}
#navalphajump {
width: 34%;
margin: auto;
float: left;
text-align: center;
}
li img {
float: left;
margin-right: 3px;
}
.header {
background: url("images/back_head.png") left bottom repeat-x #5e81a7;
height: 43px;
}
.headertitle {
height: 31px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
padding-top: 10px;
/* Keep text on a single line and break with ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#libheader {
padding-left: 60px;
padding-right: 60px;
}
#libback {
background: url("images/btn_back.png") center no-repeat;
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 24px;
padding-left: 3px;
padding-top: 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
#libsearch {
background: url("images/btn_main.png") center no-repeat;
position: absolute;
top: 5px;
right: 5px;
width: 51px;
height: 24px;
padding-top: 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
#libsearchdone {
background: url("images/btn_done.png") center no-repeat;
position: absolute;
top: 5px;
right: 5px;
width: 51px;
height: 24px;
padding-top: 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
#libsearchfield {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 4;
}
#searchInput {
position: absolute;
font-size: 16px;
left: 5px;
top: 6px;
width: 236px;
}
body[orientation="landscape"] #searchInput {
width: 396px;
}
#showactions {
background: url("images/btn_add.png") center no-repeat;
width: 40px;
height: 29px;
position: absolute;
right: 0px;
top: 8px;
}
#showactions.off {
background: url("images/btn_add_off.png") center no-repeat;
}
#playlistdone {
background: url("images/btn_done.png") center no-repeat;
position: absolute;
top: 5px;
right: 5px;
width: 51px;
height: 25px;
padding-top: 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
#playlistback {
background: url("images/btn_back.png") top left no-repeat;
position: absolute;
top: 6px;
left: 5px;
width: 50px;
height: 30px;
padding-left: 3px;
padding-top: 8px;
color: #fff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
#subcontrols {
visibility: hidden;
position: absolute;
top: 46px;
left: 0px;
width: 100%;
z-index: 2;
}
#subcontrols_top {
background: url("images/back_sub.gif") left bottom repeat-x #000;
color: #fff;
opacity: 0.6;
filter:alpha(opacity=60); /* IE */
width: 100%;
height: 46px;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#volumecontrol {
background: url("images/volume_off.png") 10px center no-repeat;
position: absolute;
color: #fff;
top: 273px;
left: 60px;
width: 200px;
height: 44px;
z-index: 3;
}
body[orientation="landscape"] #volumecontrol {
top: 126px;
left: 140px;
}
#volumecontrol_on {
background: url("images/volume_on.png") left center no-repeat;
position: absolute;
color: #fff;
top: 273px;
left: 70px;
width: 180px;
height: 44px;
z-index: 4;
}
body[orientation="landscape"] #volumecontrol_on {
top: 126px;
left: 150px;
}
#shufflecontrol {
background: url("images/shuffle_off.png") center no-repeat;
position: absolute;
right: 5px;
top: 0px;
width: 25px;
height: 44px;
z-index: 3;
cursor: pointer;
}
#repeatcontrol {
background: url("images/repeat_off.png") center no-repeat;
position: absolute;
left: 7px;
top: 0px;
width: 25px;
height: 44px;
z-index: 3;
cursor: pointer;
}
#nav {
background: #242424;
margin: 0;
padding: 0.5em 0;
width: 100%;
}
#ratingcontrol {
position: absolute;
color: #fff;
top: 0px;
left: 50px;
width: 160px;
height: 44px;
z-index: 3;
}
body[orientation="landscape"] #ratingcontrol {
left: 130px;
}
#ratingcontrol ul {
background: none;
list-style: none;
padding: 0px;
margin: 0px;
}
#ratingcontrol ul li {
background: url("images/star_off.png") center no-repeat;
border: none;
display: inline;
padding-left: 15px;
padding-right: 15px;
line-height: 44px;
text-align: center;
cursor: pointer;
}
#ratingcontrol ul li.starred {
background: url("images/star_on.png") center no-repeat;
}
#ratingcontrol ul li.empty {
background: none;
}
#subcontrols_bottom {
background: url("images/back_sub_bottom.gif") left top repeat-x #000;
color: #fff;
opacity: 0.6;
filter:alpha(opacity=60); /* IE */
width: 100%;
height: 46px;
position: absolute;
top: 273px;
left: 0px;
z-index: 2;
}
body[orientation="landscape"] #subcontrols_bottom {
top: 126px;
}
#volumedowncontrol {
background: url("images/volume_down.png") 29px center no-repeat;
position: absolute;
left: 0px;
top: 274px;
width: 61px;
height: 44px;
z-index: 3;
cursor: pointer;
}
body[orientation="landscape"] #volumedowncontrol {
top: 127px;
}
#volumeupcontrol {
background: url("images/volume_up.png") center no-repeat;
position: absolute;
right: 0px;
top: 274px;
width: 61px;
height: 44px;
z-index: 3;
cursor: pointer;
}
body[orientation="landscape"] #volumeupcontrol {
top: 127px;
}
#speakercontrolcontainer {
display: none;
}
#speakercontrol {
background: url("images/speakers.png") 14px 10px no-repeat;
position: absolute;
color: #fff;
right: 0px;
top: 137px;
width: 40px;
height: 42px;
cursor: pointer;
z-index: 3;
}
body[orientation="landscape"] #speakercontrol {
top: 62px;
}
#speakercontrol_back {
color: #fff;
opacity: 0.6;
filter:alpha(opacity=60); /* IE */
position: absolute;
top: 137px;
right: 0px;
width: 42px;
height: 43px;
z-index: 2;
}
body[orientation="landscape"] #speakercontrol_back {
top: 62px;
}
#speakercontrol_back_left {
background: url("images/back_float_left.png") no-repeat;
width: 9px;
height: 43px;
float: left;
}
#speakercontrol_back_mid {
background: url("images/back_float_mid.png") repeat-x;
width: 33px;
height: 42px;
float: right;
}
#itemactions {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 416px;
z-index: 5;
overflow: hidden;
}
body[orientation="landscape"] #itemactions {
height: 269px;
}
#overlay {
background: #000;
opacity: 0.5;
filter:alpha(opacity=50); /* IE */
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 416px;
z-index: 5;
}
body[orientation="landscape"] #overlay {
height: 269px;
}
#actionback {
background: url("images/back_top.gif") left top repeat-x #000;
position: absolute;
opacity: 0.8;
left: 0px;
bottom: 0px;
width: 100%;
height: 200px;
z-index: 6;
}
#itemactions ul {
background: none;
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
z-index: 7;
}
#itemactions ul li {
background: url("images/action_white.png") center no-repeat;
border: none;
text-shadow: #fff 0px 1px 0px;
text-align: center;
cursor: pointer;
padding-top: 15px;
padding-bottom: 15px;
}
#itemactions ul li.cancel {
background: url("images/action_grey.png") center no-repeat;
color: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
#alphajump {
visibility: hidden;
position: absolute;
left: 8px;
top: 90px;
width: 304px;
height: 304px;
z-index: 5;
overflow: hidden;
}
body[orientation="landscape"] #alphajump {
left: 30px;
top: 75px;
width: 419px;
height: 194px;
}
#alphajumpback {
background: url("images/dialog_overlay.png") left top repeat-x #000;
border: 2px solid #d1d1d1;
position: absolute;
opacity: 0.95;
filter:alpha(opacity=95); /* IE */
left: 0px;
top: 0px;
width: 300px;
height: 300px;
z-index: 6;
-webkit-border-radius: 10px;
}
body[orientation="landscape"] #alphajumpback {
background: #000;
width: 415px;
height: 190px;
}
#alphajump ul {
background: none;
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 7;
}
#alphajump ul li {
color: #fff;
border: none;
display: inline-block;
cursor: pointer;
width: 40px;
height: 30px;
font-size: 20px;
text-align: center;
}